@charset "utf-8";
body, html {
    min-height: 100vh;
}

/*#wrap {*/
/*    !*margin-top: -0.01333333rem;*!*/
/*    background-image: url("../../images/background.png");*/
/*    background-size: 100% 100%;*/
/*    min-height: 100vh;*/
/*    overflow: auto;*/
/*    padding-bottom: 50px;*/
/*}*/

/*主体*/
.main {
    /*position: absolute;
    left: 0;
    bottom: 0;*/
    /*margin-top: 1rem;*/
    width: 100%;
    /*height: 12rem;*/
}

.rule,
.my {
    position: absolute;
    top: 0.4rem;
    width: 1.6rem;
    height: 0.6rem;
    background: no-repeat center / contain;
}


/*游戏盒子*/
.box {
    position: relative;
    margin-bottom: .4rem;
    /*left: 0.4rem;
    top: 1.25333333rem;*/
    width: 90%;
    height: 9rem;
    margin-left: 5%;
    /*height: 8.02666667rem;*/
    /*background-image: url("../image/choujiang.png");*/
}

/*.coin {
  position: absolute;
  left: 0.4rem;
  top: -0.53333333rem;
  width: 1.50666667rem;
  height: 1rem;
  background-image: url("../image/coin.png");
  -o-animation: jump .5s linear infinite alternate;
  -ms-animation: jump .5s linear infinite alternate;
  -moz-animation: jump .5s linear infinite alternate;
  -webkit-animation: jump .5s linear infinite alternate;
  animation: jump .5s linear infinite alternate;
}
@keyframes jump {
  100% {
    top: -0.66666667rem;
  }
}*/
.box h2 {
    margin-top: 0.42666667rem;
    text-align: center;
    font-size: 0.4rem;
    color: #fff;
}

.txtChange {
    text-align: center;
    color: #ffe400;
    margin-bottom: 30px;
}

.txtChange p {
    padding: .1rem .2rem;
    display: inline-block;
    border-radius: 1rem;
    background: #b6bb74;
    border: 2px solid #6a5c36;
    font-size: .4rem;
}

#change {
    color: #ffe400;
}

/*游戏区域*/
.play {
    position: relative;
    /*left: 50%;
    top: 50%;*/
    z-index: 1;
    /*margin: -2.73333333rem 0 0 -4rem;*/
    width: 100%;
    /*height: 5.86666667rem;*/
}

.play li {
    position: absolute;
    width: 33.3333%;
    height: 2.7rem;
}

.play li:nth-child(2) {
    left: 33.33333333%;
}

.play li:nth-child(3) {
    left: 66.66666666%;
}

.play li:nth-child(4) {
    left: 66.66666666%;
    top: 3rem;
}

.play li:nth-child(5) {
    left: 66.66666666%;
    top: 6rem;
}

.play li:nth-child(6) {
    left: 33.33333333%;
    top: 6rem;
}

.play li:nth-child(7) {
    left: 0;
    top: 6rem;
}

.play li:nth-child(8) {
    left: 0;
    top: 3rem;
}



/*.play li:nth-child(4) {
  left: 5.28rem;
}
.play li:nth-child(6) {
  top: 1.94666667rem;
}
.play li:nth-child(7) {
  left: 2.64rem;
}
.play li:nth-child(8) {
  left: -2.64rem;
}
.play li:nth-child(9) {
  left: -5.28rem;
  top: -1.94666667rem;
}*/
.play li div {
    position: relative;
    z-index: 1;
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    margin: 0 auto;
}


.play li .game-name {
    color: rgba(136, 128, 254, 1);
    font-size: .2rem;
    margin-top: .2rem;

}

/*奖品图片大小*/
.play li div img {
    width: 2rem;
    height: 1.4rem;
    /*width: 2.54666667rem;
    height: 1.86666667rem;*/
}

.play li:nth-child(1) div img {
    /*width: 1.2rem;*/
    /*height: 1.2rem;*/
}

.play li:nth-child(2) div img {
    /*width: 1.8rem;*/
    /*height: auto;*/
}

.play li:nth-child(5) div img, .play li:nth-child(6) div img, .play li:nth-child(7) div img {
    /*width: 1.8rem;*/
    /*height: 1.8rem;*/
}

.play li div p {
    /* position: absolute;
     left: 50%;
     bottom: 0.13333333rem;
     margin-left: -1.28rem;*/
    width: 100%;
    font-size: 0.29333333rem;
    color: #c14600;
    line-height: 1.8rem;
    font-size: 0.4rem;
    font-weight: bold;

}

.play li.select {
    /*background-image: url("../../images/choujiang/select.png");*/
}

/*开始按钮*/
#btn {
    /*background-image: url("../image/start.png");*/
}

.btnDiv {
    position: absolute;
    left: 33.33333333%;
    width: 33.33333333%;
    height: 2.7rem;
    top: 3rem;
}

.btnDiv .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-image: url(../../images/jiang/bg1.png);*/
    background-size: 100% 100%;
    margin: 0 auto;
    color: #FFF;
}

.btnDiv .content p:first-child {
    font-size: 1rem;
    font-weight: bold;
}

.btnImg {
    width: 5rem;
    height: auto;
}

/*头部*/
.headerImg {
    width: 100%;
    height: auto;
}

/*规则弹窗背景色*/
#mask_rule {
    position: relative;
    margin: 0 .5rem 1rem;
    padding: 0 0.5rem;
    background-color: rgba(197, 80, 28, 0.85);
    background-size: 100% 100%;
    border-radius: 5px;
}

#mask_rule .box_rule {
    padding-bottom: .3rem;
    text-align: center;
}

#mask_rule .tipTitleDiv {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5rem;
    text-align: center;
}

#mask_rule .tipTitleDiv img {
    width: 48%;
    margin: 10px auto;
}

#mask_rule .tipTitle {
    width: 6rem;
    height: auto;
}

#mask_rule .box_rule .tipText {
    margin: .3rem 0;
    width: 4rem;
    height: auto;
}

#mask_rule .box_rule p {
    text-align: left;
    /*height: .6rem;*/
    line-height: .7rem;
    font-size: .4rem;
    color: #FFF;
}

#card .win {
    background: #E8EBAE;
    color: #7B804B;
    background-image: none;
    width: 70%;
    border-radius: .4rem;
    font-weight: bold;
    line-height: 1.6rem;
    font-size: .6rem;
    text-align: center;
}

.winning .red-body {
    top: -2.4rem;
    text-align: center;
}

.winning .red-head {
    top: .4rem;
}

.red-body .winImg {
    margin-top: .6rem;
    width: 2rem;
    height: auto;
}

.winning .btn {
    bottom: .2rem;
    margin-left: -1.4rem;
    background-image: none;
    background: #FFFA9C;
    color: #A5A764;
    border-radius: .2rem;
    width: 3rem;
    text-align: center;
    font-size: .4rem;
    line-height: 0.94666667rem;
    letter-spacing: .1rem;
}

.winning {
    display: block;
}

.failDiv {
    display: none;
}


#mask.fail .caidai {
    display: none;
}

#mask.fail .failDiv {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
    margin-top: -3rem;
    width: 100%;
    height: 6rem;
    text-align: center;
}

#mask.fail .failImg {
    width: 5rem;
    height: auto;
}

#mask.fail .btnFail {
    position: absolute;
    bottom: .2rem;
    left: 50%;
    margin-left: -1.4rem;
    background-image: none;
    background: #999;
    color: #666;
    border-radius: .2rem;
    width: 3rem;
    text-align: center;
    font-size: .4rem;
    line-height: 0.94666667rem;
    letter-spacing: .1rem;
}

#mask.fail #close {
    right: 1rem;
}

.bottom-tabbar-wrapper {
    height: 1.3335rem;
}

.bottom-tabbar {
    /*background-color: #5F644A;*/
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 1.3335rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    line-height: 1em;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -0.02rem 0.08rem 0 rgba(0, 0, 0, 0.1);
}

.bottom-tabbar::after {
    display: none;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: solid #e9e9e9 1px;
}

.bottom-tabbar a {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: center;
}

.bottom-tabbar a.active .label {
    color: #FFE400;
}

.bottom-tabbar a.active .icon img {
    display: none;
}

.bottom-tabbar a.active .icon .lhimg {
    display: block;
}

.bottom-tabbar a .label {
    font-size: 0.29rem;
    color: #E6E6E6;
    line-height: 1.5em;
}

.bottom-tabbar a .icon {
    width: .5865rem;
    height: .6935rem;
    display: inline-block;
    margin-bottom: 0;
}

.bottom-tabbar a .icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.bottom-tabbar a .icon .lhimg {
    display: none;
}

/*@media only screen and (min-width: 320px) {
    html {
        font-size: 64px;
    }
}

@media only screen and (min-width: 360px) {
    html {
        font-size: 72px;
    }
}

@media only screen and (min-width: 375px) {
    html {
        font-size: 75px;
    }
}

@media only screen and (min-width: 414px) {
    html {
        font-size: 82.8px;
    }
}

@media only screen and (min-width: 480px) {
    html {
        font-size: 96px;
    }
}*/

/*底部fixed悬浮导航*/

.bottom-tabbar-box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 30;
}

.bottom-tabbar-wrapper .background-block {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;

    background-color: rgba(47,79,79, 0.85);
}

.bottom-tabbar-box .bottom-tabbar {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 31;
}
